<template>
  <div class="announcement-management">
    <h2>公告信息</h2>

    <table>
      <thead>
      <tr>
        <th @click="sortBy('title')">公告标题</th>
        <th @click="sortBy('content')">公告内容</th>
        <th @click="sortBy('releasetime')">
          发布时间
          <span v-if="sortKey === 'releasetime'" class="sort-arrow">
              <i :class="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'"></i>
            </span>
        </th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(announcement, index) in filteredAnnouncements" :key="index">
        <td>{{ announcement.title }}</td>
        <td>
          {{ announcement.content.length > 10 ? announcement.content.slice(0, 10) + '...' : announcement.content }}
          <button @click="showContent(index)" class="show-button">显示全部</button>
        </td>
        <td>{{ announcement.releasetime }}</td>
        <td>
          <button @click="editAnnouncement(index)">编辑</button>
          <button @click="confirmDelete(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>

    <!-- 添加/编辑公告弹出框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h3>{{ isEditing ? '编辑公告' : '添加公告' }}</h3>
        <label for="title">公告标题:</label>
        <input v-model="modalData.title" id="title" placeholder="请输入公告标题" />
        <label for="content">公告内容:</label>
        <textarea v-model="modalData.content" id="content" placeholder="请输入公告内容"></textarea>
        <div class="modal-actions">
          <button @click="saveAnnouncement">保存</button>
          <button @click="closeModal">取消</button>
        </div>
      </div>
    </div>

    <!-- 显示公告内容弹出框 -->
    <div v-if="showContentModal" class="content-modal">
      <div class="content-modal-content">
        <span class="close" @click="closeContentModal">&times;</span>
        <h3>公告内容</h3>
        <p>{{ fullContent }}</p>
      </div>
    </div>

    <button class="add-button" @click="openModal">+</button>
    <div v-if="deletedBellMessage" class="message">{{ deletedBellMessage }}</div>
    <div v-if="filteredAnnouncements.length === 0">
      <p>目前没有符合条件的公告信息。</p>
    </div>
  </div>
</template>


<script>
  import { findAllNotice ,deleteMessage,updateMessage } from '../../api/admins';
  export default {
    data() {
      return {
        announcements: [

        ],
        searchQuery: '',
        showModal: false,
        showContentModal: false,
        modalData: { title: '', content: '', releasetime: '' },
        fullContent: '',
        isEditing: false,
        sortKey: '', // 排序的字段
        sortOrder: 'asc', // 排序的顺序
        deletedBellMessage: ''
      };
    },
    computed: {
      filteredAnnouncements() {
        let filtered = this.announcements.filter(announcement => announcement.title.includes(this.searchQuery));
        // 根据排序字段进行排序
        if (this.sortKey) {
          filtered.sort((a, b) => {
            if (this.sortKey === 'releasetime') {
              const dateA = new Date(a.releasetime);
              const dateB = new Date(b.releasetime);
              return this.sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
            }
            return 0;
          });
        }
        return filtered;
      },
    },
    methods: {
      async fetchAnnouncements() {
        try {
          const response = await findAllNotice();
          this.announcements = response.data.data;
        } catch (error) {
          console.error('获取公告数据失败：', error);
        }
      },
      showContent(index) {
        this.fullContent = this.announcements[index].content;
        this.showContentModal = true;
      },
      closeContentModal() {
        this.showContentModal = false;
      },
      editAnnouncement(index) {
        this.isEditing = true;
        this.modalData = { ...this.announcements[index] };
        this.showModal = true;
      },
      confirmDelete(index) {
        const confirmation = confirm('是否确认删除该公告?');
        if (confirmation) {
          this.deleteAnnouncement(index);
        }
      },
      async deleteAnnouncement(index) {
        try {
          const announcement = this.announcements[index];
          await deleteMessage(announcement.id);
          this.announcements.splice(index, 1);
          this.deletedBellMessage = '公告已删除！';
          setTimeout(() => {
            this.deletedBellMessage = '';
          }, 2000);
        } catch (error) {
          console.error('删除公告失败：', error);
          alert('删除公告失败，请稍后重试！');
        }
      },
      openModal() {
        this.isEditing = false;
        this.modalData = { id: null, title: '', content: '', releasetime: '' };
        this.showModal = true;
      },
      closeModal() {
        this.showModal = false;
      },
      async saveAnnouncement() {
        try {
          if (this.isEditing) {
            await updateMessage(this.modalData);
            const index = this.announcements.findIndex(
                (announcement) => announcement.id === this.modalData.id
            );
            if (index !== -1) {
              this.announcements[index] = { ...this.modalData };
            }
          } else {
            this.modalData.releasetime = new Date().toISOString().split('T')[0];
            this.announcements.push({ ...this.modalData });
          }
          this.closeModal();
          alert('公告已保存！');
        } catch (error) {
          console.error('保存公告失败：', error);
          alert('保存公告失败，请稍后重试！');
        }
      },
      sortBy(field) {
        if (this.sortKey === field) {
          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
        } else {
          this.sortKey = field;
          this.sortOrder = 'asc';
        }
      },
    },
    mounted() {
      this.fetchAnnouncements();
    }
  };
  </script>
  
  <style scoped>
  .announcement-management {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
  }
  h2 {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .search-bar input {
    padding: 10px;
    width: 320px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s ease;
  }
  .search-bar input:focus {
    border-color: #5b9bd5;
    outline: none;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: -20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  table-row:hover {
    background-color: #f9f9f9;
  }
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  th {
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: bold;
    position: relative;
  }
  th:hover {
    background-color: #e2e2e2;
  }
  th span {
    position: absolute;
    right: 10px;
    font-size: 14px;
  }
  tr:hover {
    background-color: #fafafa;
  }
  
  button {
    padding: 6px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
  }
  button:hover {
    background-color: #45a049;
  }
  button:disabled {
    background-color: #dcdcdc;
    cursor: not-allowed;
  }
  button:last-child {
    margin-right: 0; 
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 400px;
    z-index: 1000;
  }
  
  .modal-content {
    font-family: 'Arial', sans-serif;
  }
  
  h3 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    color: #333;
  }
  
  label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  input, textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
  }
  
  input:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
  }
  
  textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  .modal-actions {
    display: flex;
    justify-content: center;
  }
  
  .modal-btn {
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
  }
  
  .save-btn {
    background-color: #28a745;
    color: white;
  }
  
  .save-btn:hover {
    background-color: #218838;
  }
  
  .cancel-btn {
    background-color: #dc3545;
    color: white;
  }
  
  .cancel-btn:hover {
    background-color: #c82333;
  }
  
  .add-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    font-size: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
  }
  
  .add-button:hover {
    background-color: #0056b3;
  }
  
  .show-button {
    padding: 5px 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
  }
  
  .show-button:hover {
    background-color: #218838;
  }
  
  .content-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 400px;
    z-index: 1000;
  }
  
  .content-modal-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .content-modal-content button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
  }
  
  .content-modal-content button:hover {
    background-color: #0056b3;
  }
  
  .arrow-up, .arrow-down {
    font-size: 14px;
    margin-left: 5px;
  }
  
  .arrow-up::before {
    content: '↑';
  }
  
  .arrow-down::before {
    content: '↓';
  }
  
  .sort-arrow {
    float: right;
  }

  .close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #333;
  }

  .message {
    color: green;
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
  }
  </style>